<template>
    <div>
        <div class="login-body" v-if="state == 1">
            <div class="login-card">
                <div class="text-box">
                    <div class="login-title-one">手机密码登录</div>
                    <div class="login-title-two"><a target="_blank" href="/manage" style="color:#F95D4A;">经纪人登录</a>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login1.png" class="login-icon">
                        <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input"
                                  style="width: 350px"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login2.png" class="login-icon">
                        <el-input v-model="password" type="password" placeholder="请输入登录密码" class="login-input"
                                  style="width: 350px"></el-input>
                    </div>
                </div>
                <div style="height: 25px;line-height: 25px">
                    <el-checkbox v-model="checked" @change="changeCheck">记住密码</el-checkbox>
                </div>
                <div class="login-btn" @click="submitLogin()">登录</div>
                <div class="text-box">
                    <div class="text-left-box" @click="forgot()">忘记密码</div>
                    <div class="text-right-box" @click="reg()">立即注册</div>
                </div>
            </div>
        </div>
        <div class="login-body" v-if="state == 2">
            <div class="login-card">
                <div class="login-title">账号注册</div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="@/assets/img/user_name.png" class="login-icon">
                        <el-input v-model="user_name" placeholder="请输入用户名" class="login-input"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login1.png" class="login-icon">
                        <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login2.png" class="login-icon">
                        <el-input v-model="password" placeholder="请输入登录密码" class="login-input"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login2.png" class="login-icon">
                        <el-input v-model="code" placeholder="请输入手机验证码" class="login-input"></el-input>
                    </div>
                    <div class="login-form-code" @click="sendCode()">{{
                        sencond == 60 ? '获取验证码' : sencond + 'S后获取'
                        }}
                    </div>
                </div>
                <div style="height: 25px;line-height: 25px">
                    <el-checkbox v-model="checkedCopy">
                        <span style="color: black">勾选及同意用户协议</span>
                        <a href="/seller/index/userAgreement" target="_blank">《用户协议》</a>
                    </el-checkbox>
                </div>
                <div class="login-btn" @click="submitReg()">立即注册</div>
                <div class="text-box">
                    <div class="text-left-box" @click="forgot()">忘记密码</div>
                    <div class="text-right-box" @click="login()">去登录</div>
                </div>
            </div>
        </div>
        <div class="login-body" v-if="state == 3">
            <div class="login-card">
                <div class="login-title">忘记密码</div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login1.png" class="login-icon">
                        <el-input v-model="mobile" placeholder="请输入手机号码" class="login-input"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login2.png" class="login-icon">
                        <el-input v-model="password" placeholder="请输入新密码" class="login-input"></el-input>
                    </div>
                </div>
                <div class="login-form">
                    <div class="login-form-content">
                        <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/login2.png" class="login-icon">
                        <el-input v-model="code" placeholder="请输入手机验证码" class="login-input"></el-input>
                    </div>
                    <div class="login-form-code" @click="sendCode()">{{
                        sencond == 60 ? '获取验证码' : sencond + 'S后获取'
                        }}
                    </div>
                </div>
                <div class="login-btn" @click="submitForgot()">重置密码</div>
                <div class="text-box">
                    <div class="text-left-box" @click="login()">去登陆</div>
                    <div class="text-right-box" @click="reg()">立即注册</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            state: 1,
            mobile: '',
            password: '',
            user_name: '',
            code: '',
            sencond: 60,
            timer: '',
            no: '',
            checked: false,
            checkedCopy: false
        }
    },
    mounted() {
        this.no = this.$route.params.no;
        console.log(this.no);
        if (this.no) {
            this.saveNo();
        }
        this.setData();
    },
    methods: {
        changeCheck() {
            localStorage.setItem('login_check', this.checked ? 1 : 0);
            localStorage.setItem('login_username', '');
            localStorage.setItem('login_password', '');
        },
        setData() {
            this.checked = localStorage.getItem('login_check') == 1 ? true : false;
            var mobile = localStorage.getItem('login_username');
            var password = localStorage.getItem('login_password');
            console.log(localStorage.getItem('login_check'));
            console.log(mobile, password);
            var that = this;
            setTimeout(function () {
                that.mobile = mobile ? mobile : '';
                that.password = password ? password : '';
                that.$forceUpdate();
                console.log(mobile, password);
            }, 100);
        },
        forgot() {
            this.state = 3;
            this.password = '';
            this.code = '';
            this.sencond = 60;
            this.timer = '';
        },
        reg() {
            this.state = 2;
            this.password = '';
            this.code = '';
            this.sencond = 60;
            this.timer = '';
        },
        login() {
            this.state = 1;
            this.password = '';
            this.code = '';
            this.sencond = 60;
            this.timer = '';
        },
        submit() {
            if (!this.mobile) return this.toast(0, '请输入手机号码');
            if (!this.code) return this.toast(0, '请输入手机验证码');
            this.ajaxs('login/loginDo', {
                data: {
                    mobile: this.mobile,
                    code: this.code,
                    no: this.no
                },
                success: (res) => {

                    if (res.code) {
                        this.toast(1, '登录成功');
                        this.$store.commit('updateMobile', res.msg);
                        this.$store.commit('updateLoagin', true);
                        this.$router.push({
                            path: '/index/index/index'
                        });
                    } else {
                        this.toast(res.code, res.msg);
                    }
                }
            })
        },
        getUserName() {
            this.ajaxs('user/getInfo', {
                success: (res) => {
                    if (res.msg.user_name) {
                        this.$store.commit('updateName', res.msg.user_name);
                    } else {
                        this.$store.commit('updateName', "暂无用户名");
                    }
                }
            })
        },
        submitLogin() {
            if (!this.mobile) return this.toast(0, '请输入手机号码');
            if (!this.password) return this.toast(0, '请输入登录密码');
            if (this.checked) {
                localStorage.setItem('login_username', this.mobile);
                localStorage.setItem('login_password', this.password);
            }
            this.ajaxs('login/pwdLogin', {
                data: {
                    mobile: this.mobile,
                    password: this.password,
                },
                success: (res) => {
                    if (res.code) {
                        this.$notify({
                            title: '成功',
                            message: res.msg,
                            type: 'success'
                        });
                        this.$store.commit('updateMobile', res.msg);
                        this.$store.commit('updateLoagin', true);
                        this.getUserName()
                        this.$router.push({
                            path: '/index/index/index'
                        });
                        return
                    } else {
                        return this.toast(0, res.msg);
                    }
                }
            })
        },
        submitReg() {
            if (!this.mobile) return this.toast(0, '请输入手机号码');
            if (!this.password) return this.toast(0, '请输入登录密码');
            if (!this.code) return this.toast(0, '请输入手机验证码');
            if (!this.checkedCopy) return this.toast(0, '请勾选用户协议');
            this.ajaxs('login/regDo', {
                data: {
                    mobile: this.mobile,
                    password: this.password,
                    code: this.code,
                    no: this.no,
                    user_name: this.user_name
                },
                success: (res) => {
                    this.toast(res.code, res.msg);
                    if (res.code) {
                        this.login();
                    }
                }
            })
        },
        submitForgot() {
            if (!this.mobile) return this.toast(0, '请输入手机号码');
            if (!this.password) return this.toast(0, '请输入新登录密码');
            if (!this.code) return this.toast(0, '请输入手机验证码');
            this.ajaxs('login/forgotDo', {
                data: {
                    mobile: this.mobile,
                    password: this.password,
                    code: this.code,
                },
                success: (res) => {
                    this.toast(res.code, res.msg);
                    if (res.code) {
                        this.login();
                    }
                }
            })
        },
        saveNo() {
            if (!this.no) return;
            this.ajaxs('login/saveNo', {
                data: {no: this.no},
                success: (res) => {
                    console.log(res.msg);
                }
            })
        },
        sendCode() {
            if (this.sencond != 60) return false;
            if (!this.mobile) return this.toast(0, '请输入手机号码');
            this.ajaxs('login/mobileDo', {
                data: {
                    mobile: this.mobile
                },
                success: (res) => {
                    this.toast(res.code, res.msg);
                    if (res.code) {
                        this.sencond--;
                        this.timer = setInterval(() => {
                            if (this.sencond > 0) {
                                this.sencond--;
                            } else {
                                this.sencond = 60;
                                clearInterval(this.timer);
                            }
                        }, 1000);
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
@import "../../assets/css/login/login.css";
</style>
